<template>
  <div id="app">
    <div style="padding: 10px">
			<a-button type="primary"> 基本按钮 </a-button>
			<a-button>默认按钮</a-button>
			<a-button type="dashed"> 按钮 </a-button>
			<a-button type="primary"> 按钮 </a-button>
			<a-button type="link"> 按钮 </a-button>
			<a-switch default-checked />
			<a-spin />
		</div>

    <div class="zq-box">顶顶顶顶</div>

		<a-radio-group v-model="radioVal" @change="radioChange">
					<a-radio v-for="item in palettes" :key="item.key" :value="item.color">
						<div
							style="width: 20px; height: 20px; vertical-align: middle"
							:style="{ background: item.color }"
						></div>
						<div>{{item.key}}</div>
					</a-radio>
				</a-radio-group>
  </div>
</template>

<script>
import { colorList, updateTheme } from './settingConfig'
export default {
	name: 'App',
	data () {
		return {
			radioVal: '#faad14',
			palettes: colorList
		}
	},
	methods: {
		radioChange () {
			updateTheme(this.radioVal)
		}
	}
}
</script>

<style lang="less">
.zq-box {
  width: 100px;
  height: 100px;
  background-color: @primary-color;
}
</style>
